@extends('layouts.app')
@section('headscript')
    {{-- Jquery && Datepicker --}}
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    {{-- Chart.js --}}
    {{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> --}}
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

    {{-- FontAwesome --}}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
@endsection
@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">{{ __('Report') }}</div>

                    <div class="card-body">
                        @if (session('status'))
                            <div class="alert alert-success" role="alert">
                                {{ session('status') }}
                            </div>
                        @endif

                        <div class="">

                            <div class="d-flex justify-content-start mb-3">
                                <div id="reportrange"
                                    style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; min-width: 270px">
                                    <i class="fa fa-calendar"></i>&nbsp;
                                    <span></span> <i class="fa fa-caret-down"></i>
                                </div>
                            </div>

                            <canvas id="myChart" style="width:100%;"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@section('script')
    {{-- Chart.js --}}
    <script>
        var xValues = ["Today"];
        var yValues = [{{ $clicks->daily_clicks }}, 0];
        var barColors = ["red", "green", "blue", "orange", "brown"];
        var ctx = $('#myChart');
        let mychart;

        myChart = new Chart(ctx, {
            type: "bar",
            data: {
                labels: xValues,
                datasets: [{
                    backgroundColor: barColors,
                    data: yValues
                }]
            },
            options: {
                legend: {
                    display: false,
                },
                title: {
                    display: true,
                    text: "Clicks Report for today"
                },
                scales: {
                    yAxes: [
                        {
                            ticks: {
                                precision: 0,
                                beginAtZero: true,
                            },
                        },
                    ],
                },
            }
        });
    </script>
    <script type="text/javascript">
        $(function() {

            var start = moment(); //.subtract(29, 'days');
            var end = moment();

            function cb(start, end) {
                $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            }

            $('#reportrange').daterangepicker({
                startDate: start,
                endDate: end,
                maxDate: moment(),
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')]
                }
            }, function(start, end, label) {
                $.ajax({
                    type: "POST",
                    url: "https://www.gripelectric.net/report/clicks/getdata",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        "startDate": start.format('YYYY-MM-DD'),
                        "endDate": end.format('YYYY-MM-DD'),
                        "label": label
                    },
                    success: function(response) {
                        if (myChart) {
                            myChart.destroy();
                        }
                        
                        let xValues = [];
                        let yValues = [];
                        
                        if (label == "Today") {
                            xValues[0] = label;
                            yValues[0] = response[0].daily_clicks;
                        } else if (label == "Yesterday") {
                            xValues[0] = label;
                            yValues[0] = response[0].daily_clicks;
                        } else {
                            for (let i = 0; i < response.length; i++) {
                                xValues[i] = response[i].label;
                                yValues[i] = response[i].daily_clicks;
                            }
                        }
                        var barColors = ["red", "green", "blue", "orange", "brown"];

                        myChart = new Chart(ctx, {
                            type: "bar",
                            data: {
                                labels: xValues,
                                datasets: [{
                                    backgroundColor: barColors,
                                    data: yValues
                                }]
                            },
                            options: {
                                legend: {
                                    display: false
                                },
                                title: {
                                    display: true,
                                    text: "Clicks Report for " + label
                                },
                                scales: {
                                    yAxes: [
                                        {
                                            ticks: {
                                                precision: 0,
                                                beginAtZero: true,
                                            },
                                        },
                                    ],
                                },
                            }
                        });
                    }
                });

                // console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end
                //     .format('YYYY-MM-DD'));
            });

            cb(start, end);
        });
    </script>
@endsection
@endsection